<template>
  <div class="nav">
    <div class="logo">
      <img width="300px" src="@/assets/jscw-logo.png" alt="">
    </div>
    <div class="menu">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#F2F6FC"
        text-color="#666666"
        active-text-color="#F56C6C"
      >
        <template v-for="item in navList">
          <el-submenu v-if="item.childrens && item.childrens.length" :index="item.name" :key="item.id">
            <template slot="title">
              {{ item.name }}
            </template>
            <el-menu-item
              v-for="(childrens, id) in item.childrens"
              :key="id"
              :index="childrens.url"
              @click="clickMenu(childrens)"
            >
              {{ childrens.name }}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="item.url" :key="item.id + 1" @click="clickMenu(item)" >
          {{ item.name }}
          </el-menu-item>
        </template>
        <el-menu-item v-if="!this.user.loginStatus" @click="clickMenu({url:'/login'})">
          登陆/注册
        </el-menu-item>
        <el-menu-item v-if="this.user.loginStatus" @click="clickMenu({url:'/user'})">
          欢迎：{{this.user.userInfo.name}}
        </el-menu-item>
        <el-menu-item v-if="this.user.loginStatus" @click="clickLogout()">
          退出
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'NavMenu',
  props: {
    navList: Array
  },
  computed:{
    ...mapState({
      user:state => state.user
    })
  },
  data() {
      return {};
  },
  mounted(){
  },
  methods: {
    clickMenu(menu) {
        // this.$store.commit('SET_MENU', menu);
        this.$router.push({
            path: menu.url
        });
    },
    clickLogout () {
      this.$store.dispatch("FedLogOut").then(() => {
        this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
      }).catch(() => {
        this.loading = false;
        // if (this.captchaEnabled) {
        //   this.getCode();
        // }
      });
      this.$router.push({path:'/'});
    }
  }
};
</script>
<style>
.nav {
  width: 100%;
}
.logo {
  float:left;
  /* display: inline-block; */
}
.menu {
  float: right;
}
</style>